<template>
  <div>
    <div class="ray-container" v-for="(ray, index) in rays" :key="index">
      <div class="ray-line"></div>
      <div
        class="ray-tick"
        v-for="(tick, tickIndex) in ray.ticks"
        :key="tick.id"
        :style="{ left: tick.left + '%' }"
      >
        <span class="tick-label"> {{ tick.label }}</span>
      </div>
      <div class="arrow"></div>
    </div>
    <div>
      <button @click="addRay">添加</button>
      <input type="number" v-model="segmentCount" min="1" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 份数
      segmentCount: 1,

      rays: [],
      newRay: {
        ticks: [],
      },
    };
  },
  methods: {
    updateTicks() {
      const tickWidth = 100 / this.segmentCount;
      this.rays.forEach((ray) => {
        ray.ticks = [];
        // 计算当前的分段数
        const segmentCount = parseInt(this.segmentCount);

        this.rays.forEach((ray) => {
          ray.ticks = [];
          const tickWidth = 100 / segmentCount; // 计算每个刻度的宽度
          for (let i = 0; i <= segmentCount; i++) {
            const numerator = i === segmentCount ? 1 : i;
            const denominator = segmentCount;
            const label =
              numerator === 0
                ? "0"
                : numerator === denominator
                ? "1"
                : numerator + "/" + denominator;
            ray.ticks.push({
              id: Date.now(),
              label: label,
              left: tickWidth * i,
            });
          }
        });
        // for (let i = 0; i <= this.segmentCount; i++) {
        //   const numerator = i === this.segmentCount ? 1 : i;
        //   const denominator = parseInt(this.segmentCount);
        //   // console.log(numerator, denominator);
        //   const label =
        //     numerator === 0
        //       ? "0"
        //       : numerator === denominator
        //       ? "1"
        //       : numerator + "/" + denominator;
        //   ray.ticks.push({ id: Date.now(), label: label, left: tickWidth * i });

        // }
      });
    },
    addRay() {
      // let newRay = { ticks: [] };
      // this.rays.push(newRay);

      // this.updateTicks();
      // let newRay = JSON.parse(JSON.stringify(this.newRay)); // 创建一个新的射线对象
      // this.rays.push(newRay);
      // this.updateTicks();
      let newRay = { ticks: [] };
      this.rays.push(newRay);
      this.updateTicks(); // 重新计算刻度
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.ray-container {
  width: 70%;
  position: relative;
  height: 20px;
  margin-bottom: 10px;
  margin: 20px auto;
}

.ray-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
}

.ray-tick {
  width: 1px;
  height: 10px;
  background-color: #000;
  position: absolute;
  top: 29%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.tick-label {
  position: absolute;
  top: 11px;
  left: -10px;
}
.arrow {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid black;
  transform: translateY(-50%);
}

button {
  margin-right: 10px;
}
</style>
